<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'tooling.add'">创建</el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 160px;" v-model="query.queryString.tooling_status" placeholder="选择状态"
        @change="research" filterable clearable>
        <el-option v-for="(item,index) in toolingStatusOptions" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-select class="filter-item" style="width: 160px;" v-model="query.queryString.typeid" placeholder="选择类型"
        @change="research" filterable clearable>
        <el-option v-for="(item,index) in toolingTypeOptions" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-input style="width: 200px;" placeholder="输入模治具信息查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.str"></el-input>
      <el-input style="width: 200px;" placeholder="输入产品料号查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.key_part_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出
      </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)" v-permission="'tooling.edit'">编辑</a>
        <span>&nbsp;</span>
        <a href="#" class="text-green" @click.prevent="bindSku(v.row,v.$index)" v-permission="'tooling.edit'">绑定产品</a>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)" v-permission="'tooling.delete'">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <el-dialog width="90%" :visible.sync="bindSkuModalShow" :close-on-click-modal="false">
      <div class="flex" style="margin-top:-20px;">
        <div class="flex1">
          <div class="flex" style="justify-content:space-between; align-items: center; padding-bottom: 10px;">
            <label>可绑定产品</label>
            <el-input style="width: 180px;" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search"
              @keyup.enter.native="getCanBindSkuList(true)" @clear="getCanBindSkuList(true)"
              v-model="canBindSkuParams.queryString">
            </el-input>
          </div>
          <el-table :data="canBindSkuList" border style="width: 100%" @selection-change="canBindSelectionChange">
            <el-table-column type="selection" width="40" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model_code" label="机种编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model_name" label="机种名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="key_part_no" label="产品编码" show-overflow-tooltip></el-table-column>
            <el-table-column prop="key_part_name" label="产品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="brief_code" label="产品简码" show-overflow-tooltip></el-table-column>
          </el-table>
          <z-pagination :pagination="bindSkuPagination" :total="canBindSkuTotal" :page.sync="canBindSkuParams.page"
            :limit.sync="canBindSkuParams.size" @change="getCanBindSkuList()">
          </z-pagination>
        </div>
        <div style="padding:20px;">
          <div style="margin-top:60px">
            <el-button type="success" icon="el-icon-d-arrow-right" @click="bindCommit"
              :disabled="canBindSelections.length == 0" :loading="bindLoading" circle></el-button>
          </div>
          <div style="margin-top:60px">
            <el-button type="danger" icon="el-icon-d-arrow-left" @click="cancelBindCommit"
              :disabled="cancelBindSelectons.length == 0" :loading="bindLoading" circle></el-button>
          </div>
        </div>
        <div class="flex1">
          <div class="flex" style="justify-content:space-between; align-items: center; padding-bottom: 10px;">
            <label>已绑定产品</label>
            <el-input style="width: 180px;" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search"
              @keyup.enter.native="getBoundSkuList(true)" @clear="getBoundSkuList(true)"
              v-model="boundSkuParams.queryString">
            </el-input>
          </div>
          <el-table :data="boundSkuList" border style="width: 100%" @selection-change="cancelBindSelectionChange">
            <el-table-column type="selection" width="40" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model_code" label="机种编号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model_name" label="机种名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="key_part_no" label="产品编码" show-overflow-tooltip></el-table-column>
            <el-table-column prop="key_part_name" label="产品名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="brief_code" label="产品简码" show-overflow-tooltip></el-table-column>
          </el-table>
          <z-pagination :pagination="bindSkuPagination" :total="boundSkuTotal" :page.sync="boundSkuParams.page"
            :limit.sync="boundSkuParams.size" @change="getBoundSkuList()">
          </z-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'tooling',
  data: function () {
    return {
      api: this.$api.tooling,
      apiEdit: this.$api.tooling + 'add',
      name: '模治具',
      columns: [
        { title: '模治具类型', key: 'tooling_type_name', width: 120 },
        { title: '模治具编号', key: 'tooling_code', width: 120 },
        { title: '模治具名称', key: 'tooling_name', width: 140 },
        { title: '模治具描述', key: 'tooling_description' },
        { title: '模治具状态', key: 'tooling_status_text', width: 120 },
        { title: '备注', key: 'remarks', width: 120 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '模治具类型',
          key: 'tooling_type_id',
          required: true,
          name: 'select',
          options: [],
          props: {
            filterable: true,
            // remote: true,
            // remoteMethod: this.getToolingOptions,
          },
        },
        { title: '模治具编号', key: 'tooling_code', required: true },
        { title: '模治具名称', key: 'tooling_name', required: true },
        { title: '模治具描述', key: 'tooling_description' },
        { title: '模治具状态', key: 'tooling_status', name: 'select', options: [], props: {}, required: true },
        { title: '备注', key: 'remarks' },
      ],
      query: {
        queryString: {},
        page: 1,
        size: 10,
      },
      initData: {
        tooling_status: '1',
        typeid: null,
      },
      tableProps: {
        border: true,
        opsColWith: 140,
      },
      toolingStatusOptions: [
        { value: '1', label: '正常' },
        // { value: '1', label: '使用' },
        { value: '2', label: '修模' },
        { value: '3', label: '保养' },
        { value: '4', label: '损坏' },
        { value: '5', label: '报废' },
      ],
      toolingTypeOptions: [],
      bindSkuModalShow: false,
      bindSkuTableProps: { border: true, hideOperations: true },
      bindSkuPagination: {
        layout: 'prev, pager, next, ->, total, sizes',
      },
      bindSkuColumns: [
        { title: '机种编号', key: 'model_code' },
        { title: '机种名称', key: 'model_name' },
        { title: '产品编码', key: 'key_part_no' },
        { title: '产品名称', key: 'key_part_name' },
        { title: '产品简码', key: 'brief_code' },
      ],
      canBindSkuList: [],
      canBindSkuTotal: 0,
      canBindSkuParams: {
        page: 1,
        queryString: '',
        tooling_id: null,
      },
      boundSkuList: [],
      boundSkuTotal: 0,
      boundSkuParams: {
        page: 1,
        size: 10,
        queryString: '',
        tooling_id: null,
      },
      cur_tooling_id: null,
      canBindSelections: [],
      cancelBindSelectons: [],
      bindLoading: false,
    }
  },
  methods: {
    formatList(list) {
      //依据实际需求处理
      let tmp = _.cloneDeep(list)
      let tmpObj = _.keyBy(this.toolingStatusOptions, 'value')
      return tmp.map((i) => {
        i.tooling_status_text = tmpObj[i.tooling_status] ? tmpObj[i.tooling_status].label : ''
        return i
      })
    },
    bindSku(row) {
      this.cur_tooling_id = row.id
      this.canBindSkuParams.tooling_id = row.id
      this.canBindSkuParams.page = 1
      this.boundSkuParams.tooling_id = row.id
      this.boundSkuParams.page = 1
      this.bindSkuModalShow = true
      this.getBoundSkuList()
      this.getCanBindSkuList()
    },
    getBoundSkuList(v) {
      if (v) this.boundSkuParams.page = 1
      this.$request(this.api + 'getBoundSkuList', this.boundSkuParams).then((r) => {
        this.boundSkuList = r.list
        this.boundSkuTotal = r.total
      })
    },
    getCanBindSkuList(v) {
      if (v) this.canBindSkuParams.page = 1
      this.$request(this.api + 'getCanBindSkuList', this.canBindSkuParams).then((r) => {
        this.canBindSkuList = r.list
        this.canBindSkuTotal = r.total
      })
    },
    bindCommit() {
      this.bindLoading = true
      this.$request(
        this.api + 'bindSku',
        {
          tooling_id: this.cur_tooling_id,
          sku_ids: this.canBindSelections,
        },
        'POST',
      )
        .then((r) => {
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.bindLoading = false
          this.canBindSelections = []
          this.bindSku({ id: this.cur_tooling_id })
        })
        .catch((e) => {
          this.bindLoading = false
        })
    },
    cancelBindCommit() {
      this.bindLoading = true
      this.$request(
        this.api + 'unbindSku',
        {
          tooling_usage_ids: this.cancelBindSelectons,
        },
        'POST',
      )
        .then((r) => {
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.bindLoading = false
          this.cancelBindSelectons = []
          this.bindSku({ id: this.cur_tooling_id })
        })
        .catch((e) => {
          this.bindLoading = false
        })
    },
    canBindSelectionChange(v) {
      this.canBindSelections = v.map((i) => i.sku_id)
    },
    cancelBindSelectionChange(v) {
      this.cancelBindSelectons = v.map((i) => i.id)
    },

    // 筛选项获取类型
    getToolingTypeOptions(v) {
      this.toolingTypeOptions = []
      this.$request(this.$api.toolingType + 'getList?size=999' + '&queryString=' + v).then((r) => {
        this.toolingTypeOptions = this.formatSelectOption(r.list)
        this.setFieldOptions('tooling_type_id', this.toolingTypeOptions, 'value', 'label')
      })
    },

    // 获取类型
    getToolingOptions(v) {
      this.setFieldOptions('tooling_type_id', [], 'id', ['tooling_type_code', 'tooling_type_name'])
      this.$request(this.$api.toolingType + 'getList?size=200' + '&queryString=' + v).then((r) => {
        this.setFieldOptions('tooling_type_id', r.list, 'id', ['tooling_type_code', 'tooling_type_name'])
      })
    },
    formatSelectOption(data) {
      let tmp = []
      if (data && data.length > 0) {
        tmp = this.arrayOptions(data, 'id', ['tooling_type_code', 'tooling_type_name'])
      }
      return tmp
    },
  },
  created: function () {
    this.getList()
    this.setFieldOptions('tooling_status', this.toolingStatusOptions, 'value', 'label')
    this.getToolingTypeOptions('')
  },
}
</script>
<style scoped>
</style>
